---
title: Moving to Tailwind CSS from another framework? Use a Prefix!
description: Migrating to Tailwind CSS from another CSS framework? Here's a simple solution to avoid class conflicts.
emoji: 😅
slug: move-to-tailwindcss-without-breaking-changes
pubDate: 2022-10-26
updatedDate: 2025-08-08
terms:
  - migration
  - prefix
  - css
---

import BaseAd from '../../components/BaseAd.astro'

<BaseAd />

I've heard this a few times:

> I'm switching to Tailwind CSS, but my old framework keeps breaking things!

Whether you're moving from Bootstrap, Bulma, or any other CSS framework,
Tailwind CSS makes it easy to avoid class name conflicts.

**The magic line?**

```css
@import 'tailwindcss' prefix(tw);
```

Add this to your CSS entry file and Tailwind will generate classes like
`tw-flex` instead of `flex`. You can use any prefix you like, such as `app` or
`custom`:

```css
@import 'tailwindcss' prefix(app);
```

This prevents conflicts with utility classes from other frameworks, making your
migration much smoother.

**What about CSS resets?**

Most CSS frameworks include their own CSS resets (normalize/base styles). If you
notice style conflicts, you can disable Tailwind's base styles by omitting the
base import:

```css
/* @import "tailwindcss/base"; */
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

This keeps your previous framework's styles intact while you transition.

For more details, check out the
[Tailwind CSS docs on prefix](https://tailwindcss.com/docs/configuration#prefix).
